<!-- 项目进度 -->
<template>
  <div class="main">
    <div class="head pt32 pb32">
      <div class="back-title ft14">
        <div class="back mr32 align-row-center pointer" @click="back">
          <i class="icon ic_back mr8"></i>
          <span>返回</span>
        </div>
        <div class="fc-black" v-text="dataInfo.shortName"></div>
      </div>
      <div class="right-btns ft14 fc-black">
        <div class="pr32 pointer align-row-center" @click="is_show_setTemplate = true">
          <i class="icon ic_set mr8"></i>
          <span>设为模板</span>
        </div>
        <div class="pr24 pointer align-row-center" @click="goMember">
          <i class="icon ic_user-group  mr8"></i>
          <span>成员</span>
        </div>
        <div v-show="dataInfo.managerId==this.$store.state.userInfo.userId" class="pr24 pointer align-row-center" @click="is_show_deleteProject = true">
          <i class="icon ic_user-group  mr8"></i>
          <span>删除项目</span>
        </div>
      </div>
    </div>
    <vuescroll :ops="ops">
    <div class="content pb24">
      <div class="flex-col-1 mr16 mb16">
        <div class="project_jindu pt24  pl32 pr32">
          <div class="jindu_titile">
            <h3 class="ft16">项目进度</h3>
            <div @click="isAttention" class="follow pl8 pr8 pt8 pb6 pointer">
              <i class="mr8" :class="dataInfo.attention == true ? 'icon_start_active' : 'icon_start_no'"></i>
              <span class="text ft14 pt2">{{ dataInfo.attention == true ? '取消关注' : '关注' }}</span>
            </div>
          </div>
          <div class="jindu_content pt24">
            <div class="left">
              <div class="yuan">
                <div class="nei_yuan">
                </div>
                <div class="wai_yuan">
                  <el-progress type="circle" :color="'#ff8f2b'" :stroke-width="10" :width="118"
                               :percentage="dataInfo.progressProportion || 0"></el-progress>
                </div>
              </div>
            </div>
            <div class="right">
              <h3 class="fc-black ft16 pt16 ellipsis1" v-text="dataInfo.shortName"></h3>
              <p class="pt24 ft14 ">
                <span class="fc-orange" v-text="dataInfo.endTimeCn"></span>
              </p>
              <p class="fc-gray ft14 pt16">{{ !!dataInfo.startTime == true ? new
                Date(dataInfo.startTime).Format('yyyy-MM-dd') :'' }}至{{ !!dataInfo.endTime == true ? new
                Date(dataInfo.endTime).Format('yyyy-MM-dd') : ''}}</p>
              <p class="fc-gray ft14 pt24">项目经理：<span v-text="dataInfo.managerName"></span></p>
              <div class="project-wc mt16 pl12 pr12 pt8 pb7 ft12 fc-fff pointer" v-if="dataInfo.status != 3&&dataInfo.managerId==this.$store.state.userInfo.userId"
                   @click="is_show_projectEnd = true">项目完结
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="flex-col-2 mr16 mb16">
        <div class="col pt32 pl32 pr32 pb32 over">
          <h3 class="ft16">项目阶段</h3>
          <div class="pt32 space-between">
            <span class="ft14 fc-black">现阶段：</span>
            <div class="right_xia_btn">now</div>
          </div>
          <div class="fc-gray pt12 pb12 lh24" v-text="dataInfo.nowStage"></div>
          <div class=" space-between">
            <span class="ft14 fc-black">下阶段：</span>
            <div class="right_xia_btn">next</div>
          </div>
          <div class="fc-gray pt12 pb12 lh24" v-text="dataInfo.nextStage"></div>
        </div>
      </div>
      <div class="flex-col-3 mr16 mb16">
        <div class="col_div">
          <div class="pr8 pb8">
            <div class="col text-center pointer ts-p-1" :class="btnHover.jbxx"
                 @mouseover="btnHover.jbxx = 'pt20'"
                 @mouseout="btnHover.jbxx = 'pt40'"
            >
              <i class="ic_basic-infor "></i>
              <p class="text-center pt16 pb16">基本信息</p>
              <div class="see_btn" :class="btnHover.jbxx == 'pt20' ? 'active' : ''" @click="is_show_jbxx = true">查看
              </div>
            </div>
          </div>
          <div class="pl8 pb8">
            <div class="col text-center pointer ts-p-1" :class="btnHover.jclc"
                 @mouseover="btnHover.jclc = 'pt20'"
                 @mouseout="btnHover.jclc = 'pt40'"
            >
              <i class="ic_highlight "></i>
              <p class="text-center pt16 pb16">精彩历程</p>
              <div @click="goCourse" class="see_btn" :class="btnHover.jclc == 'pt20' ? 'active' : ''">查看</div>
            </div>
          </div>
          <div class="pt8 pr8">
            <div class="col text-center pointer ts-p-1" :class="btnHover.lcb"
                 @mouseover="btnHover.lcb = 'pt20'"
                 @mouseout="btnHover.lcb = 'pt40'"
            >
              <i class="ic_milestone "></i>
              <p class="text-center pt16 pb16">里程碑</p>
              <div @click='openMilePost' class="see_btn" :class="btnHover.lcb == 'pt20' ? 'active' : ''">
                {{dataInfo.havePlan?'查看':'创建'}}</div>
            </div>
          </div>
          <div class="pl8 pt8">
            <div class="col text-center pointer ts-p-1" :class="btnHover.xmzl"
                 @mouseover="btnHover.xmzl = 'pt20'"
                 @mouseout="btnHover.xmzl = 'pt40'"
            >
              <i class="ic_data "></i>
              <p class="text-center pt16 pb16">项目资料</p>
              <div @click="qureyProjectInfo" class="see_btn" :class="btnHover.xmzl == 'pt20' ? 'active' : ''">查看</div>
            </div>
          </div>
        </div>
      </div>
      <div class="flex-col-4 mr16 mb16">
        <div class="project_summary pt32 pr32 pb32 pl32">
          <div class="title">
            <h3 class="ft16">项目经理最新总结</h3>
            <i  class="icon ic_more" @click="goDynamic(1)"></i>
          </div>
          <div class="info pt32" v-if="summaryInfo != null && JSON.stringify(summaryInfo) != '{}'">
            <div class="head">
              <img :src="!!summaryInfo.xmjlUserHeadImage == true ? serverIp.setImgUrl(summaryInfo.xmjlUserHeadImage) : defaultHeadImg">
            </div>
            <div class="describe pl16 fc-black1">
              <p class="name ft14" v-text="summaryInfo.xmjlUserName"></p>
              <p class="content lh32 ft14 ellipsis3" v-text="summaryInfo.xmjlReportContent"></p>
              <p class="ft12 fc-gray pt8 pb24" v-text="summaryInfo.xmjlDateTimeCn"></p>
              <div class="zan">
                <i class="icon ic_like pointer"></i>
                <span class="pl16 pr40" v-text="summaryInfo.xmjlLikeNum"></span>
                <i class="icon ic_comment-dots pointer "></i>
                <span class="pl16" v-text="summaryInfo.xmjlCommentNum"></span>
              </div>
            </div>
          </div>
          <div v-else class="defaultPage">
            <img src="../../../assets/img/project/info/ic_qs_dt.png" alt=""/>
            <p>暂无总结</p>
          </div>
        </div>
      </div>
      <div class="flex-col-4 mr16 mb16">
        <div class="project_summary pt32 pr24">
          <div class="title pl32">
            <h3 class="ft16">任务完成情况</h3>
            <!-- <span>···</span> -->
          </div>
          <div id="echarts_task" class="pie_task"></div>
        </div>
      </div>
      <div class="flex-col-4 mr16 mb16">
        <div class="project_summary pt32 pr32 pb32 pl32">
          <div class="title">
            <h3 class="ft16">项目动态</h3>
            <i class="icon ic_more" v-if="dynamicInfo != null" @click="goDynamic(2)"></i>
          </div>
          <div class="info pt32" v-if="dynamicInfo != null && JSON.stringify(dynamicInfo) != '{}'">
            <div class="head">
              <img :src="!!dynamicInfo.createUserHeadImage == true ? serverIp.setImgUrl(dynamicInfo.createUserHeadImage) : defaultHeadImg">
            </div>
            <div class="describe pl16 fc-black1">
              <p class="name ft14" v-text="dynamicInfo.createUserName"></p>
              <div class="describe_qi pt8" v-if="dynamicInfo.planName">
                <i class="icon ic_flag-fill"></i>
                <p class="pl8 fc-gray ft12 " v-text="dynamicInfo.planName"></p>
              </div>
              <p class="content pt24 lh32 ft14 ellipsis3" v-text="dynamicInfo.content"></p>
              <p class="ft12 fc-gray pt8 pb24" v-text="dynamicInfo.addTimeCn"></p>
            </div>
          </div>
          <div v-else class="defaultPage">
            <img src="../../../assets/img/project/info/ic_qs_zj.png" alt=""/>
            <p>暂无动态</p>
          </div>
        </div>
      </div>
    </div>
    </vuescroll>
    <transition name="fade">
      <div class="main-popup" v-if="is_show_jbxx">
        <project-info @close="closeModal" @callback="projectInfoCallback" :data="dataInfo"></project-info>
      </div>
    </transition>
    <transition name="fade">
      <div class="main-popup" v-if="is_show_projectEnd">
        <project-end @close="closeModal" @callback="projectEndCallback" :data="dataInfo"></project-end>
      </div>
    </transition>
    <transition name="fade">
      <div class="main-popup" v-if="is_show_setTemplate">
        <set-template @close="closeModal" @callback="setTemplateCallback" :data="dataInfo"></set-template>
      </div>
    </transition>
    <transition name="fade">
      <div class="main-popup" v-if="is_show_deleteProject">
        <message-box @close="closeModal" @callback="deleteProjectCallback" :indexClose="'is_show_deleteProject'"
                     :content="'项目删除后不可再恢复，请确认是否要删除该项目？'"></message-box>
      </div>
    </transition>
    <!-- 里程碑 -->
    <transition name="fade">
      <div class="main-popup" v-if="is_show_milepost">
        <milepost :projectId="projectId" :projectInfo="dataInfo" @close="closeMilepost"></milepost>
      </div>
    </transition>
  </div>

</template>

<script>
  import projectInfo from '@/components/projectInfo'; //基本信息詳情
  import projectEnd from '@/components/projectInfo/end'; //基本信息詳情
  import setTemplate from '@/components/projectInfo/setTemplate'; //基本信息詳情
  import milepost from '@/components/milepost'; //里程碑
  import messageBox from '@/components/base/messageBox'; //消息弹窗
  import vuescroll from 'vuescroll'
  // 引入 ECharts 主模块
  var echarts = require('echarts/lib/echarts');
  // 引入柱状图
  require('echarts/lib/chart/pie');
  // 引入提示框组件、标题组件、工具箱组件。
  import 'echarts/lib/component/tooltip';
  import 'echarts/lib/component/title';
  import 'echarts/lib/component/legend';
  import 'echarts/lib/component/toolbox';

  export default {
    components: {
      projectInfo,
      milepost,
      projectEnd,
      setTemplate,
      messageBox,
      vuescroll
    },
    data() {
      return {
        ops: {
          vuescroll: {
            wheelDirectionReverse: false,//true：横向滚动，false：竖向滚动
            wheelScrollDuration: 0,//滚动速度
            mode: 'native',
            sizeStrategy: 'percent',
            detectResize: true
          },
          scrollPanel: {
            scrollingX: false,//启用横屏滚动
            scrollingY: true,//关闭竖向滚动
          },
          rail: {
            background: '#e5ebf1',
            opacity: 1,
            size: '6px',
            borderRadius: '6px',
            gutterOfEnds: '40px',//轨道距 x 和 y 轴两端的距离
            gutterOfSide: '0px'//距离容器的距离
          },
          bar: {
            onlyShowBarOnScroll: false,//是否只在滚动时显示bar
            background: '#cbd5df',
            keepShow: true,
            size: '4px',
            minSize: false
          }
        },//滚动配置
        defaultHeadImg:require('../../../assets/img/ic_tx_gzq.png'),
        echartsTask: {
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          legend: {
            orient: 'vertical',
            x: 'right',
            y: '60px',
            data: ['已完成', '未完成', '延期', '逾期']
          },
          series: [
            {
              name: '任务完成情况',
              type: 'pie',
              center: ['38%', '50%'],
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  show: false,
                  textStyle: {
                    fontSize: '30',
                    fontWeight: 'bold'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: true
                }
              },
              data: [
                {value: 335, name: '已完成'},
                {value: 310, name: '未完成'},
                {value: 234, name: '延期'},
                {value: 135, name: '逾期'}
              ],
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                },
                normal: {
                  color: function (params) {
                    //自定义颜色
                    var colorList = [
                      '#0a52e4', '#8e30ff', '#ff8f2b', '#f3624a',
                    ];
                    return colorList[params.dataIndex]
                  }
                }
              }
            }
          ]
        },
        //鼠标悬停样式
        btnHover: {
          jbxx: 'pt40',
          jclc: 'pt40',
          lcb: 'pt40',
          xmzl: 'pt40'
        },
        is_show_jbxx: false, //是否显示基本信息弹出框
        is_show_projectEnd: false,
        is_show_setTemplate: false,
        is_show_milepost: false,
        is_show_deleteProject: false,
        projectId: '',
        dataInfo: {},
        summaryInfo: {},//项目经理最新总结
        dynamicInfo: {},//动态
      };
    },
    computed: {},
    watch:{
      $route(newVal, oldVal){
        this.projectId = this.$route.query.projectId;
        this.getInfo();
        this.getCompletionStatus();
        this.getSummary();
        this.getDynamic();
      }
    },
    created() {
      this.projectId = this.$route.query.projectId;
    },
    mounted() {
      this.getInfo();
      this.getCompletionStatus();
      this.getSummary();
      this.getDynamic();
    },
    methods: {
      //查看项目资料
      qureyProjectInfo(){
        this.$message.error('此功能还未开放');
      },
      back(){
        this.$router.push({
          path: '/project/projectList',
          query: {projectType: 'all',type:2,attention:''}
        });
      },
      goMember() {
        this.$router.push({
          path: '/project/member',
          query: {projectId: this.projectId, projectName: this.dataInfo.shortName}
        });
      },
      goCourse() {
        this.$router.push({
          path: '/project/course',
          query: {projectId: this.projectId, projectName: this.dataInfo.shortName}
        });
      },
      goDynamic(type) {
        this.$router.push({path: 'dynamic', query: {projectId: this.projectId, type: type}}); // 1 项目经理总结 2 动态
      },
      openMilePost() {
        //判断是否是项目经理
        //判断是否设置了里程碑
        if (this.dataInfo.havePlan) {
          console.log(this.dataInfo);
          this.$router.push({
            path: '/project/milepost2', query: {
              id: this.dataInfo.id,
              name: this.dataInfo.shortName,
              completeTime:this.dataInfo.completeTime
            }
          });
        } else {
          console.log(this.dataInfo);
          //创建里程碑
          if(this.dataInfo.managerId==this.$store.state.userInfo.userId){
            //是经理
            if(this.dataInfo.status==3){
              this.$message.error('该项目已完结，不能设置里程碑了');
            }else {
              this.is_show_milepost = true;
            }

          }else {
            //不是经理
            this.$message.error('项目经理还未设置里程碑');
          }

        }
      },
      //关闭里程碑
      closeMilepost() {
        this.is_show_milepost=false;
      },
      closeModal(res) {
        let _this = this;
        this[res] = false;
      },
      projectEndCallback(res) {
        this.is_show_projectEnd = false;
        this.$message({
          message: '保存成功',
          type: 'success'
        });
        this.getInfo();
      },
      setTemplateCallback(res) {
        this.is_show_setTemplate = false;
        this.$message({
          message: '保存成功',
          type: 'success'
        });
        this.getInfo();
      },
      projectInfoCallback(res) {
        this.is_show_jbxx = false;
        this.$message({
          message: '修改成功',
          type: 'success'
        });
        this.getInfo();
      },
      getInfo() {
        var json = {
          projectId: this.projectId,
          userId: this.$store.state.userInfo.userId
        };
        this.$http.post("/project/project/info", json).then(res => {
          if (res.statusCode == 200) {
            this.dataInfo = res.data;
          }
          console.log(res, "res")
        }).catch(err => {
          console.log(err)
        })
      },
      getCompletionStatus() {
        var json = {
          projectId: this.projectId,
        };
        this.$http.post("/task/task/query/completionStatus", json).then(res => {
          if (res.statusCode == 200) {
            var data = res.data;
            this.echartsTask.series[0].data = [
              {value: data.completeNum || 0, name: '已完成'},
              {value: data.unCompleteNum || 0, name: '未完成'},
              {value: data.delayNum || 0, name: '延期'},
              {value: data.overdueNum || 0, name: '逾期'}
            ];
            var _this = this;
            var echartsTask = echarts.init(document.getElementById('echarts_task'));
            echartsTask.setOption(_this.echartsTask);
          }
        }).catch(err => {
          console.log(err)
        })
      },
      isAttention() {
        var json = {
          projectId: this.projectId,
          userId: this.$store.state.userInfo.userId
        };
        this.$http.post("/project/project/attention", json).then(res => {
          if (res.statusCode == 200) {
            var data = res.data;
            this.dataInfo.attention = !this.dataInfo.attention;
          }
        }).catch(err => {
          console.log(err)
        })
      },
      //获取项目经理最新总结
      getSummary() {
        this.$http.get('/plan/dynamic/managerNewDynamic', {
          params: {
            projectId: this.projectId,
            userId:this.$store.state.userInfo.userId,
          }
        }).then(res => {
          if (res.statusCode == 200) {
            if (res.data != null) {
              this.summaryInfo = res.data
            } else {
              this.summaryInfo = {};
            }
          }
        }).catch(error => {
          console.log(error);
        });
      },
      //获取动态
      getDynamic() {
        this.$http.get('/plan/dynamic/list', {
          params: {
            companyId: this.$store.state.userInfo.companyId,
            userId:this.$store.state.userInfo.userId,
            projectId: this.projectId,
            managerReport:false
          }
        }).then(res => {
          if (res.statusCode == 200) {
            if (res.data != null && res.data.list != null && res.data.list.length > 0) {
              this.dynamicInfo = res.data.list[0];
            } else {
              this.dynamicInfo = {};
            }
          }
          console.log(res, "eeeeee");
        }).catch(error => {
          console.log(error);
        });
      },
      deleteProjectCallback(res, indexClose) {
        var json = {
          projectId: this.projectId,
          userId: this.$store.state.userInfo.userId
        };
        this.$http.post("/project/project/delete", json).then(res => {
          if (res.statusCode == 200) {
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.closeModal(indexClose);
            this.$router.push({
              path: '/project/projectList',
              query: {projectType: '', attention: '', type: 2}
            });//type:2项目列表
            setTimeout(
              function () {
                window.location.reload();
              },1000
            );
          }
        }).catch(err => {
          console.log(err)
        })
      },
    }
  }

</script>
<style lang='scss' scoped type="text/scss">
  .main {
    min-width: 510px;
    height: 100%;
    // overflow:hidden;
    display: flex;
    flex-direction: column;
    .col {
      .fc-gray{
        height: 65px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }
    }

    > .head {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .back-title {
        display: flex;
        align-items: center;

        .back {
          color: #96a2aa;
        }
      }

      .right-btns {
        display: flex;
        align-items: center;
      }
    }

    .content {
      // flex:1;
      display: flex;
      flex-wrap: wrap;
      /*overflow-y: auto;*/

      .flex-col-1 {
        width: 448px;
        height: 288px;

        .project_jindu {
          height: 100%;
          background-color: #ffffff;
          border-radius: 6px;
          display: flex;
          flex-direction: column;

          .jindu_titile {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .follow {
              display: flex;
              background-color: #ffffff;
              border-radius: 4px;
              border: solid 1px #dbe1e5;

              .text {
                color: #96a2aa;
              }
            }
          }

          .jindu_content {
            flex: 1;
            display: flex;
            overflow: hidden;

            .left {
              width: 50%;

              .yuan {
                width: 144px;
                height: 144px;
                border-radius: 50%;
                // background-color:#f2f6f9;
                background: linear-gradient(#f2f6f9, #FFF);
                position: relative;

                .nei_yuan {
                  width: 116px;
                  height: 116px;
                  position: absolute;
                  top: 14px;
                  left: 14px;
                  z-index: 999;
                  background-color: #FFF;
                  border-radius: 50%;
                }

                .wai_yuan {
                  width: 100%;
                  height: 100%;
                  position: absolute;
                  top: 13px;
                  left: 13px;
                  z-index: 1000;
                  border-radius: 50%;
                }
              }
            }

            .right {
              width: 50%;

              .project-wc {
                display: inline-block;
                background-color: #ff8f2b;
                border-radius: 4px;
              }
            }
          }
        }
      }

      .flex-col-2 {
        width: 240px;
        height: 288px;

        > .col {
          height: 100%;
          background-color: #ffffff;
          border-radius: 6px;
        }

        .right_xia_btn {
          width: 40px;
          height: 16px;
          background-color: #e6edfc;
          border-radius: 2px;
          font-size: 12px;
          color: #0a52e4;
          text-align: center;
          line-height: 16px;
        }
      }

      .flex-col-3 {
        width: 288px;
        height: 288px;

        .col_div {
          height: 100%;
          display: flex;
          flex-wrap: wrap;

          > div {
            width: 50%;
            height: 50%;

            > .col {
              height: 100%;
              background-color: #ffffff;
              border-radius: 6px;
              transition: padding .3s linear;

              .ic_basic-infor {
                display: block;
                width: 24px;
                height: 24px;
                margin: 0 auto;
                background-image: url("~@/assets/img/project/info/ic_basic-infor.png");
                background-repeat: no-repeat;
                background-size: 100% 100%;
              }

              .ic_highlight {
                display: block;
                width: 24px;
                height: 24px;
                margin: 0 auto;
                background-image: url("~@/assets/img/project/info/ic_highlight.png");
                background-repeat: no-repeat;
                background-size: 100% 100%;
              }

              .ic_milestone {
                display: block;
                width: 24px;
                height: 24px;
                margin: 0 auto;
                background-image: url("~@/assets/img/project/info/ic_milestone.png");
                background-repeat: no-repeat;
                background-size: 100% 100%;
              }

              .ic_data {
                display: block;
                width: 24px;
                height: 24px;
                margin: 0 auto;
                background-image: url("~@/assets/img/project/info/ic_data.png");
                background-repeat: no-repeat;
                background-size: 100% 100%;
              }

              .see_btn {
                width: 56px;
                height: 24px;
                text-align: center;
                color: #FFF;
                margin: 0 auto;
                line-height: 24px;
                background-color: #0a52e4;
                border-radius: 4px;
                font-size: 12px;
                cursor: pointer;
                opacity: 0;
                transition: opacity .1s linear .3s;

                &.active {
                  opacity: 1;
                }
              }
            }
          }
        }
      }

      .flex-col-4 {
        width: 325px;
        height: 288px;
        background-color: #ffffff;
        border-radius: 6px;

        .project_summary {
          width: 100%;
          height: 100%;

          .title {
            display: flex;
            justify-content: space-between;
            align-items: center;
          }

          .info {
            display: flex;

            .head {
              width: 40px;

              > img {
                width: 40px;
                height: 40px;
                border-radius: 3px;
              }
            }

            .describe {
              flex: 1;

              > .describe_qi {
                display: flex;
                align-items: center;

                .ic_flag-fill {
                  width: 11px;
                  height: 13px;
                  background-image: url("~@/assets/img/project/info/ic_flag-fill.png");
                }
              }

              > .zan {
                display: flex;
                align-items: center;

                .ic_like {
                  width: 15px;
                  height: 14px;
                  background-image: url("~@/assets/img/project/info/ic_like.png");
                }

                .ic_dislike {
                  width: 15px;
                  height: 14px;
                  background-image: url("~@/assets/img/project/info/ic_dislike.png");
                }

                .ic_comment-dots {
                  width: 13px;
                  height: 14px;
                  background-image: url("~@/assets/img/project/info/ic_comment-dots.png");
                }
              }
            }
          }

          .pie_task {
            width: 100%;
            height: 232px;
          }
        }
      }
    }

    .ic_set {
      width: 16px;
      height: 16px;
      background-image: url("~@/assets/img/project/info/ic_set.png");
    }

    .ic_user-group {
      width: 16px;
      height: 16px;
      background-image: url("~@/assets/img/project/info/ic_user-group.png");
    }
    .defaultPage{
      text-align: center;
      margin-top: 30px;
      >img{
        display: inline-block;
        width: 116px;
        height: 137px;
      }
      >p{
        margin-top: 25px;
        color: #96A2AA;
        font-size: 14px;
      }
    }
  }
</style>
<style lang="scss">
  .el-button--primary {
    background-color: #0755db;
    border-color: #0755db;
  }
</style>
